﻿<!DOCTYPE html>
<html ng-app="mapApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>MapApp</title>
    <link href="lib/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="lib/openlayers3/ol.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <script src="lib/jquery/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap/bootstrap.min.js"></script>
    <script src="lib/angular/angular-1.3.0.min.js"></script>
    <script src="lib/angular/angular-route.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
    <script src="lib/openlayers3/ol.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
</head>
<body class="show-list">
    <!--navbar-->
    <div id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="MapActCtrl">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    Example
                </a>
            </div>
            <div>
                <ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#">
                            <span class="glyphicon glyphicon-list" ng-click="toggleLayerList()"></span>
                        </a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li ng-repeat="act in actions">
                        <a href="#" ng-click="act.action()" title="{{act.name}}">
                            <span class="{{act.icon}}"></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--map-->
    <div id="map" ng-controller="MapCtrl">
        <div class="console-box">{{mapInfo()}}</div>
    </div>

    <!--layer list-->
    <div id="layerlist" ng-controller="MapListCtrl">
        <div class="search-group">
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
            <input type="text" class="form-control input-sm" placeholder="Search" ng-model="query.name">
        </div>
        <ul class="list-group">
            <li ng-repeat="layer in layers| filter:query " class="list-group-item">
                <!--<span class="glyphicon glyphicon-globe"></span>-->
                <a class="switcher" ng-click="layer.open = !layer.open">
                    <span class="glyphicon" ng-class="{true: 'glyphicon-eye-open', false: 'glyphicon-eye-close'}[layer.open]"></span>
                </a>
                <span class="layer-title">
                    {{layer.name}}
                </span>
                <input type="range" min="0" max="1" step="0.01" value="{{layer.opacity}}" ng-model="layer.opacity" />
            </li>
        </ul>
    </div>
</body>
</html>
